/* Bootstrap imports */
@import './bootstrap-custom-variables.scss';
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../node_modules/dragula/dist/dragula.css';

/* Bootstrap customizations */
.nav {
  // correct bug with menus
  flex-wrap: nowrap;
}
.nav-link {
  cursor: pointer;
  transition: all ease-in-out 150ms;
}
.nav-tabs {
  .nav-link {
    border: none;
  }
  .nav-link.active,
  .nav-item.show .nav-link {
    color: $gray-100;
    box-shadow: inset 0 -2px 0 0 $blue;
  }
}
.nav.flex-column {
  .nav-link.active,
  .nav-item.show .nav-link {
    color: $gray-100;
    box-shadow: inset 2px 0 0 0 $blue;
    background-color: $component-active-bg;
  }
  .nav-link.route-disabled,
  .nav-item.show .nav-link {
    box-shadow: inset -2px 0 0 0 $red;
  }
  .nav-link.route-disabled.active,
  .nav-item.show .nav-link {
    box-shadow: inset -2px 0 0 0 $red, inset 2px 0 0 0 $blue;
  }
  .nav-link.running {
    box-shadow: inset -3px 0 0 0 $green;
  }
  .nav-link.active.running {
    box-shadow: inset 2px 0 0 0 $blue, inset -3px 0 0 0 $green;
  }
  .nav-link.need-restart {
    box-shadow: inset -3px 0 0 0 $orange;
  }
  .nav-link.active.need-restart {
    box-shadow: inset 2px 0 0 0 $blue, inset -3px 0 0 0 $orange;
  }
  // adjust nav badge position
  .nav-link .badge {
    margin-left: 0.5rem;
    margin-top: 2px;
  }
}

.custom-control-label::after {
  cursor: pointer;
}

.clickable {
  cursor: pointer;
}

.modal-body {
  overflow-y: auto;
  max-height: 65vh;
}
.form-control {
  letter-spacing: 0.02rem;
  background-clip: border-box;

  &[readonly] {
    color: $text-muted;
  }
}
.input-group-text {
  color: $gray-400;

  i {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
}
label {
  color: $gray-400;
}
.input-group-prepend, .input-group-append {
  i {
    font-size: 1.2rem;
    line-height: 1.5rem;
  }
  .btn {
    // remove input group btn big padding 8/16px (do not know where it comes from)
    padding: 1px 6px;

    i {
      font-size: 1.8rem;
      line-height: 1.5rem;
    }
  }
}

.btn {
  border-width: 0;
}

.btn.btn-icon {
  text-decoration: none;

  &:visited {
    text-decoration: none;
  }

  i {
    font-size: 1.3rem;
  }
  color: $gray-500;

  &:hover, &:active {
    color: $body-color;
    text-decoration: none;
  }

  &.active {
    color: $gray-200;
    box-shadow: inset 0 -2px 0 0 $blue;
    border-radius: 0;
  }
}

.btn-custom {
  @include button-variant($custom-gray, $custom-gray, $custom-gray, $custom-gray, $custom-gray, $gray-800);
  color: $gray-500;
  border-width: $btn-border-width;

  &:hover, &.dropdown-toggle {
    color: $gray-100;
  }

  &:focus,
  &.focus,
  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus, .show > &.dropdown-toggle:focus {
    box-shadow: none;
  }
}

.btn-xs {
  // line-height: ensure proper height of button next to small input
  @include button-size($input-btn-padding-y-xs, $input-btn-padding-x-xs, $font-size-xs, $input-btn-line-height-xs, $btn-border-radius-xs);
}

.btn-group {
  .btn:first-of-type {
    border-right: 1px solid $gray-800;
  }

  .btn:last-of-type {
    border-left: 1px solid $gray-800;
  }
}

.custom-select {
  &:focus {
    color: $gray-200;
  }
}

// fix bootstrap flexfill which is incompatible with ace editor
.flex-fill {
  flex: 1 !important;
}

.mh0 {
  min-height: 0;
}

// add margin to the split dropdown caret, when there is text
.dropdown-toggle-split:not(:empty)::after, .dropup .dropdown-toggle-split:not(:empty)::after, .dropright .dropdown-toggle-split:not(:empty)::after {
  margin-left: 15px;
}
.route-responses-dropdown-content {
  display: inline-block;
  width: 140px;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
}

a:not([href]):not([tabindex]) {
  color: $gray-400;
}
